/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import withRouter from 'umi/withRouter';
import ProLayout from '@ant-design/pro-layout';
import React, { useEffect } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import GlobalFooter from '@/components/GlobalFooter';
import menus from '@/constants/menus';
import UserReduces from '@/dva/user';

/**
 * use Authorized check all menu item
 */
const menuDataRender = menuList => {
  return menus
    .map(item => {
      if (Array.isArray(item.children)) {
        return {
          ...item,
          children: item.children.filter(i => Authorized.check(i.authority, item, null) !== null),
        };
      }
      return item;
    })
    .filter(item => {
      if (item.children.length < 1) {
        return false;
      }
      return true;
    });
}


const footerRender = (_, defaultDom) => GlobalFooter;

const BasicLayout = props => {
  const { dispatch, children, settings } = props;
  /**
   * constructor
   */

  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: `${UserReduces.Namespace}/${UserReduces.Effects.getCurrentUser}`,
      });
      dispatch({
        type: `${UserReduces.Namespace}/${UserReduces.Effects.listWorkerType}`,
      });
      dispatch({
        type: `${UserReduces.Namespace}/${UserReduces.Effects.getArea}`,
      });
    }
  }, []);
  /**
   * init variables
   */

  const handleMenuCollapse = payload => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };

  return (
    <ProLayout
      logo={null}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl) {
          return defaultDom;
        }

        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: formatMessage({
            id: 'menu.home',
            defaultMessage: 'Home',
          }),
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }}
      footerRender={GlobalFooter}
      menuDataRender={menuList => menuDataRender(menuList)}
      formatMessage={formatMessage}
      rightContentRender={rightProps => <RightContent {...rightProps} />}
      {...props}
      {...settings}
    >
      {children}
    </ProLayout>
  );
};

export default withRouter(
  connect(({ global, settings, user }) => ({
    collapsed: global.collapsed,
    settings,
    user,
  }))(BasicLayout),
);
